<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="stylesheet" th:href="@{/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/lib/css/index.css}">
    <script th:src="@{/layui/layui.js}"></script>
    <style>
        .top{
            border-top-right-radius: 15px;
            border-top-left-radius: 15px;
            width:500px;
            height:150px;
            background: url("/images/background/timg3.jpg");
            text-align: center;
            font-size: 80px;
            color: white;
            line-height:150px;
            font-family: BastardusSans;

        }
    </style>
</head>
<body>

    <div class="login">
        <div class="top">
            <label>宠物托管系统</label>
        </div>
        <span style="color:#F00" th:text="${message}"></span>
        <div class="form">
        <br>
        <form class="layui-form" th:action="@{/regist}" method="post">
            <div class="layui-form-item">
                <label class="layui-form-label">用户名:</label>
                <div class="layui-input-block">
                    <input type="text" name="userName" lay-verify="username"  placeholder="填写用户名" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">密码:</label>
                <div class="layui-input-block">
                    <input type="password" name="password" lay-verify="password"  placeholder="请填写6到12位密码" autocomplete="off" class="layui-input">

                </div>

            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">姓名:</label>
                <div class="layui-input-block">
                    <input type="text" name="name" autocomplete="off" class="layui-input">

                </div>
            </div>


            <div class="layui-form-item">
                <label class="layui-form-label">性别:</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男" checked="">
                    <input type="radio" name="sex" value="女" title="女">

                </div>
            </div>



            <div class="layui-form-item">
                <label class="layui-form-label">手机号码:</label>
                <div class="layui-input-block">
                    <input type="text" name="phone" autocomplete="off" class="layui-input">

                </div>
            </div>




            <div class="layui-form-item">
                <label class="layui-form-label">住址:</label>
                <div class="layui-input-block">
                    <input type="text" name="address" autocomplete="off" class="layui-input">

                </div>
            </div>

            <!--<div class="layui-form-item">-->
                <!--<div class="layui-inline">-->
                    <!--<label class="layui-form-label">邮箱:</label>-->
                    <!--<div class="layui-input-inline">-->
                        <!--<input type="text" name="email" lay-verify="email" autocomplete="off" placeholder="example@exp.com" class="layui-input">-->
                    <!--</div>-->
                <!--</div>-->
            <!--</div>-->

            <!--<div class="layui-form-item">-->

                <!--<div class="layui-inline">-->
                    <!--<label class="layui-form-label">日期:</label>-->
                    <!--<div class="layui-input-inline">-->
                        <!--<input type="text" name="birthday" id="date" lay-verify="date" placeholder="选择出生日期" autocomplete="off" class="layui-input">-->
                    <!--</div>-->
                <!--</div>-->

            <!--</div>-->


            <!--<div class="layui-form-item layui-form-text">-->
                <!--<label class="layui-form-label">激活码:</label>-->
                <!--<div class="layui-input-block">-->
                    <!--<input placeholder="激活码(选填)" name="activeCode" class="layui-input"></input>-->
                <!--</div>-->
            <!--</div>-->
            <br>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn layui-btn-radius layui-btn-normal" lay-submit="" lay-filter="demo1">注册</button>
                    &nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;
                    <button type="reset" class="layui-btn layui-btn-radius  layui-btn-danger">重置</button>
                </div>
            </div>
            <br>
        </form>

    </div>
    </div>


    <script>
        layui.use(['form', 'layedit', 'laydate'], function(){
            var form = layui.form
                ,layer = layui.layer
                ,layedit = layui.layedit
                ,laydate = layui.laydate;

            //日期
            laydate.render({
                elem: '#date'
            });


            //创建一个编辑器
            var editIndex = layedit.build('LAY_demo_editor');

            //自定义验证规则
            form.verify({
                title: function(value){
                    if(value.length < 5){
                        return '标题至少得5个字符啊';
                    }
                }
                ,password: [
                    /^[\S]{6,12}$/
                    ,'密码必须6到12位，且不能出现空格'
                ]
                ,username:[
                    /^[\S]{2,}$/
                    ,'用户名长度必须大于2，且不能出现空格'
                ]
                ,content: function(value){
                    layedit.sync(editIndex);
                }
            });


        });
    </script>
</body>
</html>